<template>
    <div class="leftChange">
        <ThemeTitle :title="title"/>
        <div class="islandAndSea">
            <div class="islandArea" v-for="(item,index) in islandList" :key="index">
                <div class="landName">{{item.name}}</div>
                <div class="landVal" :class="{'yColor':index%2==0,'rColor':index%2!==0}">{{item.val}}</div>
            </div>   
        </div> 
        <div class="twoCharts">
            <div id="weihuaChart"></div>
            <div id="kuangshanChart"></div>
        </div>    
        <!-- 自然灾害 -->
        <div class="geoIntro" style="margin-top:23px">
            <div class="geoIntroTitle">
                <div class="sideLine"></div>
                <div class="geoIntroWord">红黑榜企业排行</div>
            </div>
            <div class="redAndBlack">
                <div v-for="(item,index) of redBlackList" :key="index">
                    {{item}}
                </div>
            </div>
        </div>
        <!-- 红黑榜企业排行 -->
        <div class="redBlackTable">
            <div class="tableHead">
                <div v-for="(item,index) of headList" :key="index">
                    {{item}}
                </div>
            </div>
            <div class="tableBody">
                <div v-for="(item,index) of bodyList" :key="index">
                    <div class="bodyUtil" v-for="(item1,index1) of item.content" :key="index1">
                        {{item1}}
                    </div>
                </div>
            </div>
        </div>
        
    </div>
</template>

<script>
    import ThemeTitle from "../../common/ThemeTitle"
    import {
        defineComponent,
        getCurrentInstance,
        onMounted,
        ref,
        provide 
    } from 'vue'
    import { useRouter } from 'vue-router'
    export default {
        components: {
            ThemeTitle
        },
        setup(){
            const title = provide("title", "行业主体概况"); 
            const { ctx } = getCurrentInstance();
            const islandList = [
                {name:'危化企业',val:'53,114㎡'},
                {name:'接入率',val:'53,114㎡'},
                {name:'矿山企业',val:'53,114㎡'},
                {name:'接入率',val:'53,114㎡'}
            ]
            const headList = [
                '排名','行政区域','企业名称','分值'
            ];
            const bodyList = [
                {content:['1','海口','大厦','99']},
                {content:['1','海口','矿山','99']},
                {content:['1','海口','行业','99']},
                {content:['1','海口','救援','99']}
            ];
            const redBlackList = [ '红榜','黑榜' ]
            function drawWHChart(){
                var dom = document.getElementById("weihuaChart");
                var myChart = ctx.$echarts.init(dom);
                let option = {
                        animation: true,
                        title: {
                            text: "火点类型",
                            // "subtext": "火点类型",
                            x: "31%",
                            y: "center",
                            textStyle: {
                                color: "#fff",
                                fontSize: 18,
                                fontWeight: "normal",
                                align: "center",
                                width: "200px"
                            },
                            subtextStyle: {
                                color: "#fff",
                                fontSize: 18,
                                fontWeight: "normal",
                                align: "center"
                            }
                        },
                        legend: {
                            width: "30%",
                            left: "right",
                            textStyle: {
                                color: "#fff",
                                fontSize: 12
                            },
                            icon: "circle",
                            right: "0",
                            bottom: "0",
                            padding: [10, 30],
                            itemGap: 20,
                            data: ["静态", "动态"]
                        },
                        series: [{
                            type: "pie",
                            center: ["40%", "50%"],
                            radius: ["65%", "90%"],
                            color: ['#2ECACE', '#2039C3'],
                            startAngle: 135,
                            labelLine: {
                                
                                    length: 25
                                
                            },
                            label: {
                                // normal: {
                                    formatter: "{b|{b}:}\n{hr|}\n {per|{d}%} ",
                                    backgroundColor: "rgba(255, 147, 38, 0)",
                                    borderColor: "transparent",
                                    borderRadius: 4,
                                    rich: {
                                        a: {
                                            color: "#999",
                                            lineHeight: 20,
                                            align: "center"
                                        },
                                        hr: {
                                            borderColor: "#aaa",
                                            width: "100%",
                                            borderWidth: 1,
                                            height: 0
                                        },
                                        b: {
                                            color: "#b3e5ff",
                                            fontSize: 14,
                                            lineHeight: 33
                                        },
                                        c: {
                                            fontSize: 14,
                                            color: "#eee"
                                        },
                                        per: {
                                            color: "#FDF44E",
                                            fontSize: 14,
                                            padding: [5, 8],
                                            borderRadius: 2
                                        }
                                    },
                                    
                                        color: "#fff",
                                        fontSize: 14
                                    
                                // }
                            },
                            emphasis: {
                                show:false,
                                position:[30,50],
                                label: {
                                    show: true,
                                    formatter: "{b|{b}:}  {per|{d}%}  ",
                                    backgroundColor: "rgba(255, 147, 38, 0)",
                                    borderColor: "transparent",
                                    borderRadius: 4,
                                    rich: {
                                        a: {
                                            color: "#999",
                                            lineHeight: 22,
                                            align: "center"
                                        },
                                        hr: {
                                            borderColor: "#aaa",
                                            width: "100%",
                                            borderWidth: 1,
                                            height: 0
                                        },
                                        b: {
                                            color: "#fff",
                                            fontSize: 18,
                                            lineHeight: 33
                                        },
                                        c: {
                                            fontSize: 14,
                                            color: "#eee"
                                        },
                                        per: {
                                            color: "#FDF44E",
                                            fontSize: 25,
                                            padding: [5, 6],
                                            borderRadius: 2
                                        }
                                    }
                                }
                            },
                            data: [{
                                name: "动态",
                                value: 55
                            }, {
                                name: "静态",
                                value: 30
                            }
                           
                            ]
                        }, {
                            type: "pie",
                            center: ["40%", "50%"],
                            radius: ["55%", "57%"],
                            label: {
                                show: false
                            },
                            data: [{
                                value: 78,
                                name: "实例1",
                                itemStyle: {
                                   
                                        color: {
                                            x: 0,
                                            y: 0,
                                            x2: 1,
                                            y2: 0,
                                            type: "linear",
                                            global: false,
                                            // colorStops: [{
                                            //     offset: 0,
                                            //     color: "#9F17FF"
                                            // }, {
                                            //     offset: 0.2,
                                            //     color: "#01A4F7"
                                            // }, {
                                            //     offset: 0.5,
                                            //     color: "#FE2C8A"
                                            // }, {
                                            //     offset: 0.8,
                                            //     color: "#FEE449"
                                            // }, {
                                            //     offset: 1,
                                            //     color: "#00FFA8"
                                            // }],
                                            colorStops: [{
                                                offset: 0,
                                                color: "#fff"
                                            }, {
                                                offset: 0.2,
                                                color: "#fff"
                                            }, {
                                                offset: 0.5,
                                                color: "#fff"
                                            }, {
                                                offset: 0.8,
                                                color: "#fff"
                                            }, {
                                                offset: 1,
                                                color: "#fff"
                                            }]
                                        }
                                    
                                }
                            }]
                        }]
                    }
                myChart.setOption(option);
                window.addEventListener("resize", () => { myChart.resize();});
            }
            function drawKSChart(){
                var dom = document.getElementById("kuangshanChart");
                var myChart = ctx.$echarts.init(dom);
                let option = {
                        animation: true,
                        title: {
                            text: "火点类型",
                            // "subtext": "火点类型",
                            x: "31%",
                            y: "center",
                            textStyle: {
                                color: "#fff",
                                fontSize: 18,
                                fontWeight: "normal",
                                align: "center",
                                width: "200px"
                            },
                            subtextStyle: {
                                color: "#fff",
                                fontSize: 18,
                                fontWeight: "normal",
                                align: "center"
                            }
                        },
                        legend: {
                            width: "30%",
                            left: "right",
                            textStyle: {
                                color: "#fff",
                                fontSize: 12
                            },
                            icon: "circle",
                            right: "0",
                            bottom: "0",
                            padding: [10, 30],
                            itemGap: 20,
                            data: ["视频", "非视频"]
                        },
                        series: [{
                            type: "pie",
                            center: ["40%", "50%"],
                            radius: ["65%", "90%"],
                            color: ['#2ECACE', '#2039C3'],
                            startAngle: 135,
                            labelLine: {
                                // normal: {
                                    length: 25
                                // }
                            },
                            label: {
                                
                                    formatter: "{b|{b}:}\n{hr|}\n {per|{d}%} ",
                                    backgroundColor: "rgba(255, 147, 38, 0)",
                                    borderColor: "transparent",
                                    borderRadius: 4,
                                    rich: {
                                        a: {
                                            color: "#999",
                                            lineHeight: 20,
                                            align: "center"
                                        },
                                        hr: {
                                            borderColor: "#aaa",
                                            width: "100%",
                                            borderWidth: 1,
                                            height: 0
                                        },
                                        b: {
                                            color: "#b3e5ff",
                                            fontSize: 14,
                                            lineHeight: 33
                                        },
                                        c: {
                                            fontSize: 14,
                                            color: "#eee"
                                        },
                                        per: {
                                            color: "#FDF44E",
                                            fontSize: 14,
                                            padding: [5, 8],
                                            borderRadius: 2
                                        }
                                    },
                                    
                                        color: "#fff",
                                        fontSize: 14
                                    
                                
                            },
                            emphasis: {
                                show:false,
                                position:[30,50],
                                label: {
                                    show: true,
                                    formatter: "{b|{b}:}  {per|{d}%}  ",
                                    backgroundColor: "rgba(255, 147, 38, 0)",
                                    borderColor: "transparent",
                                    borderRadius: 4,
                                    rich: {
                                        a: {
                                            color: "#999",
                                            lineHeight: 22,
                                            align: "center"
                                        },
                                        hr: {
                                            borderColor: "#aaa",
                                            width: "100%",
                                            borderWidth: 1,
                                            height: 0
                                        },
                                        b: {
                                            color: "#fff",
                                            fontSize: 18,
                                            lineHeight: 33
                                        },
                                        c: {
                                            fontSize: 14,
                                            color: "#eee"
                                        },
                                        per: {
                                            color: "#FDF44E",
                                            fontSize: 25,
                                            padding: [5, 6],
                                            borderRadius: 2
                                        }
                                    }
                                }
                            },
                            data: [{
                                name: "视频",
                                value: 55
                            }, {
                                name: "非视频",
                                value: 30
                            }
                            
                            ]
                        }, {
                            type: "pie",
                            center: ["40%", "50%"],
                            radius: ["55%", "57%"],
                            label: {
                                show: false
                            },
                            data: [{
                                value: 78,
                                name: "实例1",
                                itemStyle: {
                                    
                                        color: {
                                            x: 0,
                                            y: 0,
                                            x2: 1,
                                            y2: 0,
                                            type: "linear",
                                            global: false,
                                            // colorStops: [{
                                            //     offset: 0,
                                            //     color: "#9F17FF"
                                            // }, {
                                            //     offset: 0.2,
                                            //     color: "#01A4F7"
                                            // }, {
                                            //     offset: 0.5,
                                            //     color: "#FE2C8A"
                                            // }, {
                                            //     offset: 0.8,
                                            //     color: "#FEE449"
                                            // }, {
                                            //     offset: 1,
                                            //     color: "#00FFA8"
                                            // }],
                                            colorStops: [{
                                                offset: 0,
                                                color: "#fff"
                                            }, {
                                                offset: 0.2,
                                                color: "#fff"
                                            }, {
                                                offset: 0.5,
                                                color: "#fff"
                                            }, {
                                                offset: 0.8,
                                                color: "#fff"
                                            }, {
                                                offset: 1,
                                                color: "#fff"
                                            }]
                                        }
                                    }
                                
                            }]
                        }]
                    }
                myChart.setOption(option);
                window.addEventListener("resize", () => { myChart.resize();});
            }
            onMounted(()=>{
                drawWHChart()
                drawKSChart()
            })
            return {
                title,
                islandList,
                redBlackList,
                headList,
                bodyList
            }
        }
    }
</script>

<style lang="stylus" scoped>
  @import '../../../assets/varibles.styl'
    .leftChange
        .islandAndSea
            width:vw(364)
            height:vh(100)
            margin-top:vh(17)
            display:flex
            justify-content :space-between
            background: url('/data/images/hngk/littlerec.png') no-repeat
            background-size:100% 100%
            .islandArea
                width:vw(90)
                height:vh(100)
                text-align:center
                .landName
                    line-height:vh(50)
                    width:100%
                    font-size: vw(14)
                    cursor: pointer
                .landVal
                    line-height:vh(50)
                    width:100%
                    font-size: vw(19)
                .yColor
                    color:rgba(255,188,50,1)
                .rColor
                    color:rgba(255,57,118,1)
        .twoCharts
            height:vh(100)
            width:100%
            margin-top:vh(25)
            margin-bottom:vh(25)
            display:flex
            justify-content:space-between
            #weihuaChart
                flex:1
                height:100%
            #kuangshanChart
                flex:1
                height:100%
        .geoIntro
            width:vw(365)
            margin-top:vh(20)
            display:flex
            justify-content:space-between
            .geoIntroTitle
                margin-bottom:vh(13)
                display:flex
                .sideLine
                    width:vw(2)
                    height:vh(15)
                    margin-right:vw(10)
                    background: #86ceeb
                .geoIntroWord
                    color:#00EAFF
                    font-size:vw(16)
            .redAndBlack
                float:right
                width:vw(165)
                height:vh(22)
                display:flex
                div
                    width:vw(55)
                    height:vh(22)
                    line-height:vh(22)
                    text-align:center
                    background: #012332
                    border: 1px solid #1398cf
                    cursor:pointer
                .active
                    border:1px solid #ddd
                    background:#023850
        .redBlackTable
            width:100%
            height:vh(146)
            .tableHead
                height:vh(34)
                width:100%
                line-height:vh(34)
                display:flex
                justify-content:space-between
                div
                    flex:1
                    text-align:center
                    color:rgba(55,220,255,1)
            .tableBody
                div
                    height:vh(28)
                    width:100%
                    line-height:vh(28)
                    display:flex
                    border-bottom: 1px solid #213034
                    div.bodyUtil
                        //flex:1
                        height:vh(28)
                        text-align:center
                        color:#fff
                // div.active
                //     background: url('/data/images/hngk/redblack.png') no-repeat
                //     background-size:100% 100%
</style>    